<template>
    <div class="header-top">
        <div class="header-left">
            <div class="header-collapse"><i class="iconfont icon-shouqi4" @click="useToggleCollapse"></i></div>
            
            <TagsViews />
        </div>
        <div>admin</div>
    </div>
    <Crumbs />
</template>
<script setup>
import Crumbs from "./crumbs.vue"
import TagsViews from "./tagsViews.vue"
import { useCollapse } from '@/hook';
const { useToggleCollapse } = useCollapse()
</script>
<style lang="scss" scoped>
.header-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    background-color: #fff;
    box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.1);
}
.header-left {
    display: flex;
    flex: 1;
    width: 0;
}
.header-collapse {
    display: flex;
    align-items: center;
    margin: 0 20px;
    cursor: pointer;
    opacity: .3;
    transition: .3s;
    &:hover {
        opacity: 1;
    }
}

</style>